<template>
  <div id="parent-container">
    <el-container>
      <el-header>用户中心</el-header>
      <el-main>
        <div id="div1" style="float: left">
          <img id="touxiang" :src="user.imgUrl" alt="" />
          <el-button type="primary" @click="centerDialogVisible = true"
            >设置头像</el-button
          >
          <hr />
          <el-dialog
            title="点击图片更换头像"
            :visible.sync="centerDialogVisible"
            width="80%"
            center
          >
            <el-upload
              class="header-uploader"
              action="/api/imageUpload"
              :show-file-list="true"
              :on-success="handleheaderSuccess"
              :before-upload="beforeheaderUpload"
              :headers="headers"
            >
              <img v-if="user.imgUrl" :src="user.imgUrl" class="header" />

              <i v-else class="el-icon-plus header-uploader-icon"></i>
            </el-upload>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="centerDialogVisible = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <el-dialog
            title="套餐充值"
            :visible.sync="dialogFormVisible"
            width="100%"
          >
            <el-form :model="form" label-position="left">
              <el-form-item label="套餐名称" :label-width="formLabelWidth">
                <el-select
                  @change="setDescAndPrice"
                  v-model="form.planId"
                  placeholder="请选择套餐"
                >
                  <el-option
                    v-for="plan in vpnPlanList"
                    :label="plan.name"
                    :key="plan.planId"
                    :value="plan.planId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="套餐描述" :label-width="formLabelWidth">
                <el-alert
                  :title="form.description"
                  :closable="false"
                  type="warning"
                  effect="light"
                >
                </el-alert>
              </el-form-item>
              <el-form-item label="价格" :label-width="formLabelWidth">
                <el-alert
                  :title="form.price"
                  :closable="false"
                  type="warning"
                  effect="light"
                >
                </el-alert>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="goPay">支 付</el-button>
            </div>
          </el-dialog>

          <p class="user1">
            用户名：<span class="span"> {{ user.username }}</span>
          </p>
          <p class="user1">
            剩余流量：<span class="span">{{ user.bandwidth }}M</span>
          </p>
          <p class="user1">
            过期时间: <span class="span">{{ user.expirationTime }}</span>
          </p>

          <hr />
          <div class="carmi">
            充值套餐
            <el-input
              placeholder="请先输入卡密"
              prefix-icon="el-icon-search"
              v-model="carmi.content"
            >
            </el-input>
            <el-button type="warning" @click="rechargeCarmi"
              >卡密充值</el-button
            >

            <el-button type="primary" @click="dialogFormVisible = true"
              >支付宝充值</el-button
            >
          </div>

          <div>
            <el-button type="danger" @click="logout">退出登录</el-button>
          </div>
        </div>
      </el-main>
      <el-footer>powerBy Edwin</el-footer>
    </el-container>
  </div>
</template>

<script>
import UserApi from "@/api/UserApi";

export default {
  name: "LoginComponent",
  data() {
    return {
      carmi: {
        content: "",
      },
      user: {
        userId:'',
        username: "xxx",
        expirationTime: "xxx",
        bandwidth: "xxx",
        imgUrl: "",
      },
      centerDialogVisible: false,
      imageUrl: "",
      headers: this.getheaders(),

      dialogFormVisible: false,
      form: {
        planId: "",
        planName: "",
        description: "  ",
        price: "  ",
      },
      formLabelWidth: "20%",
      vpnPlanList: [],
      //当前描述
    };
  },

  mounted() {
    this.validateToken();
    this.getUserByToken();
    this.getPlanList();
  },

  methods: {
    //获取套餐列表
    getPlanList() {
      UserApi.getPlanList().then((r) => {
        this.vpnPlanList = r.rows;
        console.log(r);
      });
    },
    getUserByToken() {
      console.log("getUserByToken");
      UserApi.getVpnUserByToken(localStorage.getItem("token")).then((r) => {
        this.user = r.data;

        console.log(r);
      });
    },
    validateToken() {
      UserApi.validateToken().then((res) => {
        if (res.msg == "NOT_LOGIN") {
          this.goLogin();
        }
      });
    },

    open3() {
      this.$message({
        showClose: true,
        message: "登录失效，请重新登录",
        type: "warning",
      });
    },
    open1(msg) {
      this.$message({
        showClose: true,
        message: msg,
        type: "success",
      });
    },
    open4(msg) {
      this.$message({
        showClose: true,
        message: msg,
        type: "error",
      });
    },

    handleheaderSuccess(res) {
      if (res.msg == "NOT_LOGIN") {
        this.goLogin();
      }
      console.log(res);
      this.user.imgUrl = res.msg;
      this.imageUrl == res.msg;
    },
    goLogin() {
      this.open3();
      this.$router.push("/login");
    },
    beforeheaderUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    getheaders() {
      return {
        Authorization: localStorage.getItem("token"),
      };
    },
    setDescAndPrice() {
      for (let plan of this.vpnPlanList) {
        if (this.form.planId == plan.planId) {
          // this.currentDesc = plan.description;
          this.form.description = plan.description;
          this.form.price = plan.price;
          this.form.name = plan.name;
        }
      }
      console.log(this.form,"123123123");
    },
    goPay() {
      this.dialogFormVisible = false;

      let plan = JSON.stringify(this.form) 
      let user = this.user;
      delete user.imgUrl
      user = JSON.stringify(user) 
      // //跳转支付渲染页
      this.$router.push(`/pay?plan=${plan}&user=${user}`)

    },
    rechargeCarmi() {
      console.log(111111);
      UserApi.rechargeCarmi(this.carmi).then((res) => {
        if (res.code == 200) {
          this.getUserByToken();
          this.open1(res.msg);
        } else {
          this.open4(res.msg);
        }
      });
    },
    logout() {
      localStorage.removeItem("token");
      this.$router.push("login");
    },
  },
};
</script>

<style>
/* 确保父容器有足够的高度 */

/* 确保父容器有足够的高度 */
.parent-container {
  height: 100vh; /* 视口高度 */
  display: flex;
  flex-direction: column;
}
div {
  margin: 0;
  padding: 0;
}
#div1,
p,
.user1 {
  margin: 0;
  padding: 0;
}

#touxiang {
  /* margin-left: 30px; */
  float: left;
  height: 50px;
  width: 50px;
  border-radius: 5px;
}
.span {
  color: green;
}
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 65px;
  flex: 1; /* 让el-main能够自动填充剩余空间 */
  overflow: auto; /* 当内容太多时显示滚动条 */
}
.header-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.header-uploader .el-upload:hover {
  border-color: #409eff;
}
.header-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.header {
  width: 178px;
  height: 178px;
  display: block;
}
</style>